<template>
  <div class="app-container" style="padding: 0px;position:relative;">
    <div style="color: #72A4FF;font-size: 20px;font-weight: bold;">报警趋势</div>
    <div style="margin-top: -30px;">
      <el-tabs class="myTabs" v-model="activeName" >
        <el-tab-pane label="月统计" name="year">
          <line-chart-year v-if="activeName=='year'" :chart-data="chartDataObjYear" :clear="clear" :height="'365px'" style="margin-right: -20px"></line-chart-year>
        </el-tab-pane>
        <el-tab-pane label="日统计" name="month">
          <line-chart-month v-if="activeName=='month'" :chart-data="chartDataObjMonth" :clear="clear" :height="'365px'"></line-chart-month>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import { parseTime } from "@/utils/ruoyi";
  import { queryCountTrend } from "@/api/basic/paramAlarmRec";
  import LineChartYear from "./LineChartYear";
  import LineChartMonth from "./LineChartMonth";

  const chartDataObjYear = {
    xAxisData: [],
    yAxis:{},
    legendData: [],
    series:[]
  }
  const chartDataObjMonth = {
    xAxisData: [],
    yAxis:{},
    legendData: [],
    series:[]
  }

  export default {
    components: {LineChartYear,LineChartMonth},
    data() {
      return {
        clear:true,
        chartDataObjYear:chartDataObjYear,
        chartDataObjMonth:chartDataObjMonth,
        activeName:'year',
        queryParams:{
          alarmTime:undefined,
        }
      };
    },
    mounted() {
      let nowDate = new Date();
      let endTime = parseTime(nowDate,'{y}-{m}-{d}');
      this.queryParams.alarmTime = endTime;
      this.getCountTrend();
    },
    created() {

    },
    methods: {
      getCountTrend() {
        this.chartDataObjYear.xAxisData = [];
        this.chartDataObjYear.series = [];
        this.chartDataObjYear.legendData = [];
        this.chartDataObjMonth.xAxisData = [];
        this.chartDataObjMonth.series = [];
        this.chartDataObjMonth.legendData = [];
        queryCountTrend(this.queryParams).then(response => {
          this.chartDataObjYear.xAxisData = response.yearMap.xAxisData;
          this.chartDataObjYear.series.push({
            name: '报警年统计',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            data: response.yearMap.valsData,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          })
          this.chartDataObjYear.legendData.push("报警年统计");
          this.chartDataObjMonth.xAxisData = response.monthMap.xAxisData;
          this.chartDataObjMonth.series.push({
            name: '报警月统计',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            data: response.monthMap.valsData,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          })
          this.chartDataObjMonth.legendData.push("报警月统计");
        });
      },

    },
  };
</script>
<style scoped lang="scss">
  .myTabs ::v-deep .el-tabs__nav{
    float: right;
  }
</style>
